<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>房间列表</title>
		<style>
			.body_class {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.table_class {
				width: 100%;
				text-align: center;
			}
			
			.table_class td{
				padding: 20px;
				border: 1px solid white;
			}
			
			.table_class thead tr {
				background-color: aquamarine;
			}
			
			.table_class tbody tr:nth-child(even) {
				background-color: #FFFFFF;
			}
			
			.table_class tbody tr:nth-child(odd) {
				background-color: gainsboro;
			}
			
		
		</style>
		
		<script src="js/jquery-1.9.1.min.js"></script>
		
		<!-- 引入jquery-ui插件 -->
		<link rel="stylesheet" type="text/css" href="plugins/jquery-ui.min.css"/>
		<script type="text/javascript" src="plugins/jquery-ui-1.9.2.custom.min.js"></script>
		<script>
			//页面加载时触发
			$(function(){
				//查询房间列表的接口
				queryRoomList();
			});
			
			//查询欢乐豆流水列表
			function queryRoomList(){
				
				$.ajax({
					type: "GET",
					url: "http://localhost:8080/room/list",
					success: function(data){
						console.log(data);
						
						//data -> 房间列表
						//for -> data -> <tr></tr> -> <tbody>
						for(var i = 0; i < data.length; i++){
							//从data数组中取出第i条记录
							var item = data[i];
							
							var html = "<tr><td>" + item.rid + "</td> <td>" 
								+ item.nickName + "</td> <td>"
								+ item.info + "</td> <td>" 
								+ (item.isPass == 0 ? "无密码" : "有密码") + "</td> <td>" 
								+ (item.status == 0 ? "等待中" : "游戏开始") + "</td> <td>"
								+ (item.status == 0 ? "<button onclick=\"addRoom(" + item.rid + "," + item.isPass + ")\">加入对局</button>" : "<button>观察对局</button>")
								+ "</td></tr>";
								
							$("#mytbody").append(html);	
						}
					}
				});
			}
			
			/**
			 * @param {Object} rid  加入房间
			 */
			var global_rid;
			function addRoom(rid, isPass){
				
				var happyBean = localStorage.getItem("happyBean");
				if(happyBean < 1000){
					alert("欢乐豆不足，请充值！");
					return;
				}
				
				global_rid = rid;
				if(isPass == 1){
					//弹出框 输入密码
					$("#pass_div").dialog({
						title: "房间密码",
						width: 400,
						height: 300
					});
					
					return;
				}
				
				//直接提交加入房间的请求
				//打开一个新页面，进行游戏对局
				window.open("game.html?action=2&rid=" + global_rid);
			}
			
			/**
			 * 加入房间
			 */
			function addRoomPass(){
				//获取密码
				var pass = $("#pass").val();
				
				//关闭弹窗
				$("#pass_div").dialog("close");
				
				//跳转到游戏页面，加入房间
				//打开一个新页面，进行游戏对局
				window.open("game.html?action=2&rid=" + global_rid + "&pass=" + pass);
			}
		</script>
	</head>
	<body class="body_class">
		<h1>房间列表</h1>
		
		<table class="table_class">
			<thead>
				<tr>
					<td>房间编号</td> 
					<td>房主信息</td>
					<td>房间描述</td>
					<td>密码</td>
					<td>房间状态</td>
					<td>操作类型</td>
				</tr>
			</thead>
			<tbody id="mytbody">
				
			</tbody>
		</table>
		
		<div id="pass_div" style="display: none;">
			<div style="display: flex; flex-direction: column; align-items: center;">
				房间密码: <input id="pass" type="password" style="margin-top: 20px;"/>
				<button onclick="addRoomPass()" style="margin-top: 20px;">加入房间</button>
			</div>
		</div>
	</body>
</html>
